<template>
  <div class="permission-setting__role">
    <section>
      <n-data-table :columns="columns" :data="data" :max-height="590" striped />
    </section>
    <div>
      <n-pagination v-model:page="page" :page-count="100" :page-slot="7">
        <template #prev>
          上一页
        </template>
        <template #next>
          下一页
        </template>
      </n-pagination>
    </div>
  </div>
  <n-drawer class="permission-setting__role--drawer" v-model:show="active" width="63.02%">
    <n-drawer-content body-style="--n-body-padding:0;" closable>
      <template #header>
        <div class="my-title--primary">角色编辑</div>
      </template>
      <div class="permission-setting__role--drawer__content">
        <n-tree block-line cascade checkable :data="treeData" :default-expand-all="true"
          @update:checked-keys="updateCheckedKeys" />
      </div>
      <template #footer>
        <button class="my-btn--primary" @click="active = false">确认保存</button>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>
<script setup>
import { h, ref } from "vue";
import moreButton from "./@fragment/more-button.vue";
const active = ref(false);
const columns = [
  {
    title: 'ID',
    key: 'index',
    width: 75,
  },
  {
    title: '员工角色',
    key: 'role'
  },
  {
    title: '描述',
    key: 'describe',
    width: 600
  },
  {
    title: '人数',
    key: 'people',
  },
  {
    title: '操作',
    key: 'actions',
    className: 'actions',
    width: 185,
    render() {
      return h(moreButton, {
        edit: '编辑',
        onHandleEdit() {
          active.value = true
        },
      })
    }
  }
], data = Array.from({ length: 46 }).map((_, index) => ({
  key: index,
  index,
  role: '店员',
  describe: 'XXXXXXXXXXXXXXXXXX',
  people: '3',
  actions: '成功'
}));
const treeData = [
  {
    key: 0,
    label: '订单收银',
  },
  {
    key: 1,
    label: '订单记录',
  },
  {
    key: 2,
    label: '会员管理',
    children: [
      {
        key: 20,
        label: '会员编辑',

      }, {
        key: 21,
        label: '会员挪动',

      },
    ]
  },
  {
    key: 3,
    label: '奖励查询',
    children: [
      {
        key: 30,
        label: '奖励查看',

      }, {
        key: 31,
        label: '奖励发放',

      },
    ]
  },
  {
    key: 4,
    label: '营业报表',
  },
  {
    key: 5,
    label: '店主换货',
  }, {
    key: 6,
    label: '库房管理',
    children: [
      {
        key: 60,
        label: '库房查询',
      }, {
        key: 61,
        label: '库房入库',
      }, {
        key: 62,
        label: '库房盘点',
      },
    ]
  }, {
    key: 7,
    label: '营销活动',
  },
]
</script>
<style lang="less" scoped>
.permission-setting__role {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto 128px;
  height: 100%;

  >section {
    margin: 0 30px;

    /deep/ .n-data-table {
      .actions {
        padding: 52px 0 52px 30px;
        border-left: 1px solid #D8D8D8;
      }

      .n-data-table-tr>.n-data-table-th:last-child {
        padding: 25px 0 25px 30px;
      }
    }
  }

  >div:last-child {
    display: flex;
    align-items: center;
    padding-left: 30px;
    height: 100%;
    box-sizing: border-box;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
  }
}

.permission-setting__role--drawer__content {
  padding: 30px 0 0 80px;
  box-sizing: border-box;

  /deep/ .n-tree {
    .n-tree-node {
      align-items: center;
    }
    .n-tree-node-switcher {
      padding: 10px 0;
      .n-tree-node-switcher__icon {
        width: auto;
        height: auto;
        color: #E5E5E5;
      }
    }
    .n-base-icon {
      transform: translateZ(0) scale(2.8);
    }
    .n-tree-node-checkbox {
      margin-left: 10px;
      .n-checkbox-box {
        width: 30px;
        height: 30px;
        background-color: #F8F8F8;
      }
      .n-checkbox {
        .check-icon{
          opacity: 1;
        }
        &.n-checkbox--checked,
        &.n-checkbox--indeterminate {
          .n-checkbox-box {
            background-color: #1981F4;
          }
        }
      }
    }
    .n-tree-node-content {
      margin-left: 17px;
    }
    .n-tree-node-indent {
      margin-left: 30px;
    }

  }
}
</style>